<template>
	<view>
		<view v-if="merchantList.length" class="store-wrapper">
			<view v-for="(item, index) in merchantList" :key="item.id">
				<view
					v-if="(item.proList && item.proList.length && isStreet) || !isStreet"
					class="store-item"
					:class="isStreet ? 'street-noPad' : ''"
					:style="[
						isStreet ? { 'background-image': item.streetBackImage ? 'url(' + item.streetBackImage + ')' : 'url(' + moren + ')' } : '',
						isHome ? merchantStyle.contentStyle : ''
					]"
				>
					<view @click="goShop(item.id)" class="head" :class="isStreet ? 'street-backImage' : ''">
						<view class="left-wrapper">
							<view class="logo" :class="isStreet ? 'street-logo' : ''" :style="{ 'background-image': isStreet ? `url(${urlDomain}crmebimage/presets/shang.png)` : '' }">
								<image v-show="(isShowHome.logoShow && isHome) || !isHome" :src="isStreet ? item.rectangleLogo : item.avatar" mode=""></image>
							</view>
							<view class="con-box">
								<view class="name line1 acea-row row-middle" :class="isStreet ? 'street-name' : ''" :style="[isHome ? merchantStyle.nameColor : '']">
									<text v-show="(isShowHome.nameShow && isHome) || !isHome" class="mer_name line1">{{ item.name }}</text>
									<text
										v-if="item.isSelf && ((isShowHome.typeShow && isHome) || !isHome)"
										class="font-bg-red mr10 merType"
										:class="isHome ? '' : 'bg-color'"
										:style="[isHome ? merchantStyle.labelColor : '']"
									>
										自营
									</text>
								</view>
								<view class="star-box">
									<view v-if="!isStreet" class="score">
										<view class="starsList">
											<block v-for="(itemn, indexn) in item.starLevel" :key="indexn">
												<text class="iconfont icon-pingfen font-color"></text>
											</block>
											<block v-show="Number(item.starLevel) < 5">
												<text v-for="(itemn, indexn) in 5 - parseInt(item.starLevel)" :key="indexn" class="iconfont icon-pingfen noCheck"></text>
											</block>
										</view>
									</view>
									<view v-show="!isStreet" class="lines tui-skeleton-rect"></view>
									<view class="fans" :style="isStreet ? 'color:#fff' : 'color:#999'">
										{{ item.followerNum < 10000 ? item.followerNum : (item.followerNum / 10000).toFixed(2) + '万' }}人关注
									</view>
								</view>
							</view>
						</view>
						<view v-if="!isStreet" class="link" @click="goShop(item.id)">进店</view>
					</view>
					<view v-if="item.proList.length" class="pic-wrapper" :class="isStreet ? 'street-wrapper' : ''">
						<view v-for="(goods, indexn) in item.proList" :key="indexn" class="proList" @click="godDetail(goods)">
							<view class="pic-item" :class="isStreet ? 'street-pic' : ''">
								<image :src="goods.image" mode="aspectFill"></image>
								<!-- <easy-loadimage :image-src="goods.image"></easy-loadimage> -->
								<view v-if="!isStreet" class="price">
									<text>￥</text>
									{{ goods.price }}
								</view>
							</view>
							<view class="pic-name line2" v-if="isStreet">{{ goods.name }}</view>
							<view v-if="isStreet" class="street-price">￥{{ goods.price }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { goShopDetail } from '@/libs/order.js';
import { mapGetters } from 'vuex';
import easyLoadimage from '@/components/base/easy-loadimage.vue';
export default {
	data() {
		return {
			urlDomain: this.$Cache.get('imgHost'),
			skeletonShow: true,
			isShow: true,
			moren: '',
			noStarLevel: 0
		};
	},
	components: {
		easyLoadimage
	},
	computed: mapGetters(['uid']),
	props: {
		merchantList: {
			type: Array,
			default: () => []
		},
		//是否是店铺街，true是，false不是
		isStreet: {
			type: Boolean,
			default: () => false
		},
		//是否是首页展示，true是，false不是
		isHome: {
			type: Boolean,
			default: () => false
		},
		//首页中展示字段判断
		isShowHome: {
			type: Object,
			default: () => ({
				logoShow: true,
				typeShow: true,
				nameShow: true
			})
		},
		merchantStyle: {
			type: Object,
			default: () => {}
		}
	},
	created() {
		this.moren = this.urlDomain + 'crmebimage/presets/mermoren.png';
	},
	methods: {
		godDetail(item) {
			goShopDetail(item.id);
		},
		menusTap(url) {
			uni.navigateTo({
				url
			});
		},
		goShop(id) {
			uni.navigateTo({
				url: `/pages/merchant/home/index?id=${id}`
			});
		}
	}
};
</script>

<style scoped lang="scss">
.mb8 {
	margin-bottom: 8rpx;
}
.noCheck {
	color: #ddd;
}
.score {
	display: flex;
	align-items: center;
	font-weight: 500;
	font-size: 24rpx;
	line-height: 1;
	height: 19rpx;

	.iconfont {
		font-size: 20rpx;
	}
}
.store-wrapper {
	//padding: 0 20rpx;
}

.star-box {
	display: flex;
	align-items: center;

	.lines {
		width: 2rpx;
		height: 14rpx;
		background: #bfbfbf;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.fans {
		font-size: 24rpx;
	}

	.num {
		color: $theme-color;
		font-size: 24rpx;
		margin-left: 10rpx;
	}
}

.street {
	&-logo {
		width: 191rpx !important;
		height: 80rpx !important;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		border-radius: 0 !important;
		margin-right: 0 !important;

		image {
			width: 130rpx !important;
			height: 44rpx !important;
			margin-top: 13rpx;
			margin-left: 17rpx;
		}
	}

	&-name {
		color: #fff;
	}

	&-pad20 {
		padding: 0 20rpx;
	}

	&-noPad {
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		width: 100%;
		height: 353rpx;
		padding: 24rpx !important;
		background-size: 100% 100%;
		margin-bottom: 97rpx !important;
	}

	&-pic {
		border-radius: 8rpx !important;
		overflow: hidden;
		margin-right: 12rpx !important;
	}

	&-price {
		font-size: 28rpx;
		color: #fd502f;
		margin-top: 5rpx;

		font-weight: 800;
	}

	&-wrapper {
		padding: 20rpx !important;
		margin-top: -2rpx;
	}

	&-active {
		background-size: 111rpx 19rpx;
	}
}

.backImage {
	padding: 24rpx 0 24rpx 20rpx;
	border-radius: 16px 16px 0px 0px;
}

.store-item {
	margin-bottom: 30rpx;
	padding: 24rpx;
	background-color: #fff;
	border-radius: 24rpx;

	.head {
		display: flex;
		justify-content: space-between;

		.left-wrapper {
			display: flex;
			align-items: center;

			.logo {
				width: 80rpx;
				height: 80rpx;
				border-radius: 6rpx;
				overflow: hidden;
				margin-right: 20rpx;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 6rpx;
					overflow: hidden;
				}
			}

			.con-box {
				.bt-color {
					width: max-content;
					white-space: nowrap;
					font-size: 16rpx;
					padding: 2rpx 10rpx;
					background-color: #fff;
					@include main_color(theme);
					border-radius: 13rpx;
				}

				.name {
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
					margin-top: -7rpx;

					.mer_name {
						max-width: 400rpx;
						margin-right: 10rpx;
					}
				}
			}
		}

		.link {
			width: 114rpx;
			height: 50rpx;
			line-height: 50rpx;
			@include linear-gradient(theme);
			border-radius: 25rpx;
			text-align: center;
			color: #fff;
			font-size: 24rpx;
		}
	}

	.pic-wrapper {
		width: 100%;
		display: grid;
		grid-template-rows: auto;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 20rpx;
		background-color: #ffffff;
		border-radius: 0px 16rpx 16rpx 16rpx;
		padding-top: 20rpx;

		.pic-name {
			margin-top: 10rpx;
			font-size: 24rpx;
			color: #333333;
		}

		.pic-item {
			position: relative;
			width: 100%;
			height: 170rpx;
			overflow: hidden;
			border-radius: 14rpx;

			.easy-loadimage,
			image,
			uni-image {
				overflow: hidden;
				border-radius: 16rpx;
				width: 100%;
				height: 100%;
			}

			.price {
				position: absolute;
				right: 0;
				bottom: 0;
				height: 36rpx;
				padding: 0 10rpx;
				line-height: 36rpx;
				text-align: center;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 16rpx 2rpx 16rpx 2rpx;
				color: #fff;
				font-size: 24rpx;

				text {
					font-size: 18rpx;
				}
			}

			&:nth-child(3n) {
				margin-right: 0;
			}
		}
	}
}
</style>
